<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
		<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
		<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
		<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
	  
		<title>time</title>

		<style>

			
			body{
				width: 100%;
				height: 100%;
				overflow:auto;
			}
			.topbg {
				padding-top: 2em;
				background-color: #1B82CF;
				color: white;
			
				height:15%;overflow:auto;
			}
			
			.topbg .toplabel {
				width: 25%;
				background-color: #1B82CF !important;
				border: 1px solid #ffffff;
				border-radius: .25rem;
				font-size: 3em;
				cursor: pointer;
			}
			
			body {
				font-size: 62.5%;
			}
			
		</style>
	</head>

	<body>

    
    
    <div class="card-deck-wrapper"  >
			<div class="card-deck">
			<div class="card card-block card-inverse text-center text-white bg-primary">
				<!--<img style="width: 100%;height: 60%;" class="img-responsive" src="../img/b3.jpg" />-->
				<blockquote class="card-blockquote">
					<h4  class="card-title" style='font-size:1rem'>有这样一个故事</h4>
					<p id="longday" ></p>
					
					<footer>
						<small>
         				很久很久以前，有一对同桌就这样在一起了
        </small>
					</footer>
				</blockquote>
			</div>
			
			
			<div class="card card-block card-inverse text-center text-white bg-warning ">
				<!--<img style="width: 100%;height: 60%;" class="img-responsive" src="../img/b3.jpg" />-->
				<blockquote class="card-blockquote">
					  <h4 class="card-title" style='font-size:1rem'>当前时间</h4>
					<p  id="time"></p>
					<footer>
					<small>Do a traveler in life, the life of a singer, do the dancer of life, guilt, regret, regret!</small>
					</footer>
				</blockquote>
			</div>
			
			<div class="card card-block card-inverse text-center text-white bg-danger ">
				<!--<img style="width: 100%;height: 60%;" class="img-responsive" src="../img/b3.jpg" />-->
				<blockquote class="card-blockquote">
					
					<h4  class="card-title" style='font-size:1rem'>恋爱纪念日</h4>
					<p id="day"></p>
					<footer>
						<small>
          		一切时光的开始，擦肩而过的情缘，不论对错，不分你我，这或许就是爱情。
        </small>
					</footer>
				</blockquote>
			</div>
		
			<div class="card card-block card-inverse text-center text-white bg-primary">
				<!--<img style="width: 100%;height: 60%;" class="img-responsive" src="../img/b3.jpg" />-->
				<blockquote class="card-blockquote">
					<h4  class="card-title" style='font-size:1rem'>妞妞生日</h4>
					<p id="birthday" ></p>
					
					<footer>
						<small>
         				生日快乐
        </small>
					</footer>
				</blockquote>
			</div>
		
			
		</div>
		</div>

		
		
		

		<div ></div> <br/>
		<div id="tm"></div>
		<script type="text/javascript">
			
			
	window.addEventListener("popstate", function(e) {
    window.history.back()
  }, false);
			
			//在页面加载完后立即执行多个函数完美方案。
			function addloadEvent(func){   
				var oldonload=window.onload;   
				if(typeof window.onload !="function"){  
					window.onload=func;   }   
					else{    window.onload=function(){    
						if(oldonload){   
							oldonload();     
						}     
						func();    
					}   
					}  
			} 
			addloadEvent(showTime);  
			addloadEvent(day);  
			//addloadEvent(tb);  
			addloadEvent(birthdayday); 
			addloadEvent(longlongday); 
			
			//在页面加载完后立即执行多个函数完美方案over。  //天时秒分倒计时 
			function tb(){  
				var myDate=new Date();
				//获取当前时间  
				var endtime=new Date("2018,1,1");
				//获取结束时间  
				//换算成秒 小数点向下舍入取整  
				var ltime=Math.floor((endtime.getTime()-myDate.getTime())/1000);  
				//console.log(ltime)  
				//换算成天 小数点向下舍入取整  
				var d=Math.floor(ltime/(24*60*60));  
				//换算成小时取去掉天数的余数（也就是小时） 小数点向下舍入取整 
				var h=Math.floor(ltime/(60*60)%24);  
				//换算成分钟取去掉小时的余数（也就是分钟） 小数点向下舍入取整  
				var m=Math.floor(ltime/60%60);  
				//换算成分钟取去掉分钟的余数（也就是秒） 小数点向下舍入取整  
				var s=Math.floor(ltime%60);  
				document.getElementById("tm").innerHTML="距2018年元旦还有:"+d+"天"+h+"小时"+m+"分钟"+s+"秒";  
				if(ltime<=0){   document.getElementById("tm").innerHTML="元旦快乐！";   
				clearTimeout(tb);  }  setTimeout(tb,1000);  }  
				//当秒数为个位数时前面+字符串0  
				function checkTime(i){  return i<10? "0"+i:""+i;  }  
				//当前时间标准格式  
				function showTime(){  var myDate=new Date();
					//获取当前时间 
					var year=myDate.getFullYear();
					//获取年份  
					var month=myDate.getMonth()+1;
					//获取月份是0-11的数字所以+1  
					var date=myDate.getDate();
					//日  
					var day=myDate.getDay();
					// 
					var h=myDate.getHours();
					//小时  
					var m=myDate.getMinutes();
					//分钟  
					var s=myDate.getSeconds();
					//秒  
					checkTime(m);  
					checkTime(s);  
					var week="日一二三四五六".charAt(day);  
					document.getElementById("time").innerHTML=year+"年"+month+"月"+date+"日"+"星期"+week+h+":"+m+":"+s;  
					setTimeout(showTime,1000);   }  
					//倒计时天数计算  
					function day(){ 
						var myDate=new Date();
						//获取当前时间  
						
						var year=myDate.getFullYear();
						var jinianri=year+",3,1";
						var endtime=new Date(jinianri);
						//获取结束时间  
						//先换算成毫秒再相减就是时间差，再除以一天的毫秒数结果是带有小数点的，用math方法进一位取整  
						var ltime=Math.ceil((endtime.getTime()-myDate.getTime())/(24*60*60*1000));
						if(ltime<=0){
						
						year+=1;
						jinianri=year+",3,1";
						endtime=new Date(jinianri);
						ltime=Math.ceil((endtime.getTime()-myDate.getTime())/(24*60*60*1000));
						document.getElementById("day").innerHTML="距纪念日还有:<span style='font-size:2rem'>"+ltime+"</span>天"; 
						}else{
							document.getElementById("day").innerHTML="距纪念日还有:<span style='font-size:2rem'>"+ltime+"</span>天"; 
						}
						
						
						 
					}
					
					
					function birthdayday(){ 
						var myDate=new Date();
						//获取当前时间  
						
						var year=myDate.getFullYear();
						var jinianri=year+",7,10";
						var endtime=new Date(jinianri);
						//获取结束时间  
						//先换算成毫秒再相减就是时间差，再除以一天的毫秒数结果是带有小数点的，用math方法进一位取整  
						var ltime=Math.ceil((endtime.getTime()-myDate.getTime())/(24*60*60*1000));
						if(ltime<=0){
						
						year+=1;
						jinianri=year+",7,10";
						endtime=new Date(jinianri);
						ltime=Math.ceil((endtime.getTime()-myDate.getTime())/(24*60*60*1000));
						document.getElementById("birthday").innerHTML="距生日还有:<span style='font-size:2rem'>"+ltime+"</span>天"; 
						}else{
							document.getElementById("birthday").innerHTML="距生日还有:<span style='font-size:2rem'>"+ltime+"</span>天"; 
						}
						
						if(ltime<30){
							var message="2";
							alert("生日快到了，赶紧准备礼物");
						}
						 
					}
					
					
					function longlongday(){ 
						var myDate=new Date();
						//获取当前时间  
						
						var year=myDate.getFullYear();
						var jinianri="2010,3,1";
						var endtime=new Date(jinianri);
						//获取结束时间  
						//先换算成毫秒再相减就是时间差，再除以一天的毫秒数结果是带有小数点的，用math方法进一位取整  
						var ltime=Math.ceil((myDate.getTime()-endtime.getTime())/(24*60*60*1000));
					
						document.getElementById("longday").innerHTML="我们在一起已经:<span style='font-size:2rem'>"+ltime+"</span>天了"; 
			 
					}
					
			
			
	
			
		</script>

	</body>

</html>